<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../res/layui/css/layui.css" type="text/css" />
<script src="../res/layui/layui.js"></script>
</head>

<body>



	<div class="layui-container">

		<div class="layui-row">
			<div class="layui-col-md2 layui-bg-blue">
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
					<li class="layui-nav-item layui-nav-itemed"><a
						href="javascript:;">默认展开</a>
						<dl class="layui-nav-child">
							<dd>
								<a lay-href="product.html">班级列表</a>
							</dd>
							<dd>
								<a href="javascript:;">选项2</a>
							</dd>
							<dd>
								<a href="">跳转</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">解决方案</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="">移动模块</a>
							</dd>
							<dd>
								<a href="">后台模版</a>
							</dd>
							<dd>
								<a href="">电商平台</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="">产品</a></li>
					<li class="layui-nav-item"><a href="">大数据</a></li>
				</ul>
			</div>
			<div class="layui-col-md9 layui-col-md-offset1 ">
				<div class="layui-tab" lay-allowClose="true">
					<ul class="layui-tab-title">
						<li class="layui-this">添加产品类别</li>
						<li>产品类别</li>
						<li>产品列表</li>
						<li>商品管理</li>
						<li>订单管理</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<form class="layui-form">
								<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
								<div class="layui-form-item">
									<label class="layui-form-label"></label>
									<div class="layui-input-block">
										<input type="text" name="name" placeholder="请输入产品类别名称"
											autocomplete="off" class="layui-input " lay-verify="required">
									</div>
								</div>


								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn" lay-submit lay-filter="addtype">立即添加</button>
										<button type="reset" class="layui-btn layui-btn-primary">重置</button>
									</div>
								</div>
								<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
							</form>



						</div>
						<div class="layui-tab-item">

							<table id="types" lay-filter="types"></table>
						</div>
						<div class="layui-tab-item">
							<button type="button" class="layui-btn" id="test1">
								<i class="layui-icon">&#xe67c;</i>上传图片
							</button>
						</div>
						
						<div class="layui-tab-item" id = "productlist">
						
						</div>
						<div class="layui-tab-item">内容5</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
<script src="../res/static/js/jquery-1.8.2.js"></script>

<script>
	layui.use([ 'layer', 'form', 'element', 'table', 'upload' ], function() {
		var layer = layui.layer; //模块对象，通过layui.模块名获得

		var form = layui.form;

		var $ = layui.$;//jquery对象

		//submit 提交事件
		form.on('submit(addtype)', function(data) {

			console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			$.ajax({

				url : "../type/insert",
				type : "get",
				data : data.field,
				success : function(res) {
					layer.msg(res.data.name + res.msg);
				}
			});

			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});

		var table = layui.table;

		//第一个实例
		table.render({
			elem : '#types'

			,
			url : '../type/query' //数据接口
			,
			page : true //开启分页
			,
			cols : [ [ //表头
			{
				field : 'id',
				title : '编号',
				width : 80,
				sort : true,
				fixed : 'left'
			}, {
				field : 'name',
				title : '名称',
				width : 80
			}

			] ]
		});

		var upload = layui.upload;

		//执行实例
		var uploadInst = upload.render({
			elem : '#test1' //绑定元素
			,
			method : 'post',
			url : '../addimg' //上传接口
			,
			done : function(res) {
				//上传完毕回调
				console.log(res);
			},
			error : function() {
				//请求异常回调
				console.log(res);
			}
		});
	});
</script>

</html>